import React, { useEffect } from 'react';
import { Col, Form, Input, Row } from 'antd';
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { v4 as uuidv4 } from 'uuid';
import FormItem from 'antd/es/form/FormItem';

interface SkuListProps {
  skuList: Array<any>;
  onChange: (e: any) => void;
}

enum typeEnum {
  price = '价格',
  stock = '库存',
}

interface modalProps extends React.FC<SkuListProps> {
}

const SkuList: modalProps = ({
                               skuList,
                               onChange
                             }) => {
  const [result, setResult] = React.useState<Array<any>>([{
    price: '',
    stock: '',
    specs: [],
    id: uuidv4()
  }]);

  const onAddChoice = () => {
    setResult([...result, {
      price: '',
      stock: '',
      specs: [],
      id: uuidv4()
    }]);
  };

  const onRemoveChoice = (idx) => {
    //删除指定的表单项
    const newResult = result.filter((item, index) => index !== idx);
    setResult(newResult);
  };

  const onValueChange = (e, idx, name) => {
    let obj: any = {};
    let specs = [];
    if (name === 'price') {
      obj['price'] = e.target.value;
    } else if (name === 'stock') {
      obj['stock'] = e.target.value;
    } else {
      specs.push({ name: name, value: e.target.value });
    }
    obj['specs'] = specs;
    let newResult = [...result];
    let item = newResult.filter(item => item.id === idx)[0];
    item.price = obj.price || item.price;
    item.stock = obj.stock || item.stock;
    //更新指定specsname的值，如果没有则新增
    if (specs.length > 0) {
      let newSpecs = item.specs.filter(item => item.name !== name);
      item.specs = newSpecs.concat(specs);
    }
    //更新result
    setResult(newResult);
    onChange(newResult);
  };


  return (
    <div>
      <Row>
        {skuList.map((item) => {
          return (
            <Col offset={1} span={3} style={{ fontWeight: 'bold' }}>
              {typeEnum[item.name] || item.name}
            </Col>
          );
        })}
      </Row>
      {result.map((item1, index) => {
        return (
          <Row style={{ marginTop: '20px' }}>
            {skuList.map((item2) => {
              return (
                <Col key={item2.id} offset={1} span={3}>
                  <Input onInput={(e) => onValueChange(e, item1.id, item2.name)} style={{ width: '120px' }}
                         placeholder={`请输入${typeEnum[item2.name] || item2.name}`} />
                </Col>
              );
            })}
            <Col>
              {result.length < 10 ? (
                <PlusCircleOutlined
                  style={{ marginLeft: '20px', marginTop: '5px', fontSize: '22px', color: '#999999' }}
                  onClick={onAddChoice} />
              ) : null}

              {result.length > 1 && (
                <MinusCircleOutlined onClick={() => {
                  onRemoveChoice(index);
                }} style={{ marginLeft: '20px', fontSize: '22px', color: '#999999' }} />
              )}
            </Col>
          </Row>
        );
      })}

    </div>
  );
};

export default SkuList;